<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../../static/system_setup/js/base.js"></script>
    <link rel="stylesheet" href="../../static/system_setup/css/style.css">
    <link rel="stylesheet" type="text/css" href="../../static/personal_center/css/index.css">
    <link rel="stylesheet" type="text/css" href="../../static/personal_center/css/common.css">
    <script type="text/javascript" src="../../static/personal_center/js/index.js"></script>
    <script src="../../static/public_file/js/jquery.min.js"></script>
    <title>Title</title>
    <style>
        body, html {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        #add_order {
            float: right;
            height: 30px;
            margin-top: 5px;
            margin-right: 10px;
            background: #00a0e9;
            color: white;
            line-height: 30px;
            width: 80px;
            border: #00a0e9 solid 1px;
            border-radius: 3px;
            font-size: 14px;
        }

        .tab_top {
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            display: inline-block;
            cursor: pointer;
            font-size: 14px;
        }
        #loading {
            background: #fff url(../../static/public_file/images/jiazai.gif) no-repeat scroll center center;
            height: 100%; width: 100%; background-size: 10%; position: fixed; margin-top: 0px; top: 0px; left: 0px; bottom: 0px;
            overflow: hidden !important; right: 0px; z-index: 999999;background-color: rgba(255, 255, 255, 0.08);
        }
    </style>
</head>
<body>
    <div id="loading">
        <div id="loading-center">
        </div>
    </div>

    <div style="width: 100%;height: 40px;background: white;font-size: 0;padding-right: 15px;">
        <div id="db" class="tab_top">定义表单</div>
        <div style="text-align: center;width: 50%;float: right;">
            <a href="javascript:;" style="text-decoration: none;" onclick="admin_add('添加表单','/system-setup/admin-add','1200','800')"><span class="l" id="add_order">创建表单</span></a>
        </div>
    </div>

    <div style="width: 100%;height: 95%;background: white;">
        <div id="my_application" style="width: 100%;height: 100%;overflow: auto;background-color: white;">
            <div class="right-box" style="width: 100%;height: 100%;margin-top: 0;">
                <div style="height: 100%;width: 100%;overflow: auto;border-bottom: #cccccc solid 1px;background-color: white;">
                    <section class="grid-main" style="height: calc(100vh - 45px);">
                        <table id="main_table"></table>
                    </section>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="../../static/system_setup/layer/2.4/layer.js"></script>
    <script type="text/javascript" src="../../static/system_setup/js/H-ui.js"></script>
    <script type="text/javascript" src="../../static/system_setup/js/H-ui.admin.page.js"></script>
    <script type="text/javascript" src="../../static/system_setup/laypage/1.2/laypage.js"></script>
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
        }

        const gridManagerName = "test",
        TYPE_MAP = {1: "HTML/CSS", 2: "nodeJS", 3: "javaScript", 4: "前端鸡汤", 5: "PM Coffee", 6: "前端框架", 7: "前端相关"},
        arg = {
            gridManagerName: "test",
            width: "100%",
            height: "100%",
            autoOrderConfig: {fixed: "left"},
            checkboxConfig: {key: "id", fixed: "left"},
            supportAjaxPage: !0,
            sortMode: "single",
            supportMenu: !0,
            menuHandler: e => (e.unshift({
                content: "自定义菜单", line: !0, onClick: e => {
                    alert(e)
                }
            }), e),
            useCellFocus: !0,
            useHideRow: !0,
            supportMoveRow: !0,
            moveRowConfig: {
                key: "priority", useSingleMode: !0, fixed: "left", handler: (e, t) => {
                    console.log(e, t)
                }
            },
            disableCache: !1,
            ajaxData: function (e, t) {
                var local_host = window.location.host;          // 获取当前IP
                return "/system-setup/user-defined"
            },
            exportConfig: {
                fileName: e => {
                    const t = new Date;
                    let a = `${t.getFullYear()}-${t.getMonth() + 1}-${t.getDate()}`;
                    for (let t in e) a = `${a}-${t}=${e[t]}`;
                    return a
                }, suffix: "xls"
            },
            ajaxType: "POST",
            responseHandler: e => (e.data.forEach((e => {
                e.priority = e.id
            })), e),
            rowRenderHandler: (e, t) => e,
            emptyTemplate: e => `<div style="text-align: center;">${e.query.title ? "搜索为空" : "暂无数据"}</div>`,
            columnData: [
                {
                    key: "name",
                    text: "流程名称",
                    align: "center",
                    disableMoveRow: !0
                }, {
                    key: "apply_user",
                    text: "创建人",
                    align: "center",
                }, {
                    key: "create_time",
                    text: "创建时间",
                    align: "center",
                }, {
                    key: "module",
                    text: "所属模块",
                    align: "center",
                }, {
                    key: "abandoned",
                    text: "是否废弃",
                    align: "center",
                }, {
                    key: "action",
                    width: "200px",
                    align: "center",
                    fixed: "right",
                    disableMoveRow: !0,
                    disableRowCheck: !0,
                    text: '<span style="color: red">操作</span>',
                    template: (e, t) => `<a id="${t.id}" href="#" onclick="admin_add('查看模板','/system-setup/customer_form_detail_view?id=${t.id}','1200','800')" style="text-decoration: none;">查看</a> | <a href="#" style="color: red;text-decoration: none;" onclick="delete_flow('delete', ${t.id})">删除</a> | <a href="#" style="text-decoration: none;">编辑</a> | <a href="#" style="color: red;text-decoration: none;" onclick="delete_flow('abandoned', ${t.id})">废弃</a>`
                }]
        }, demo1 = {
            initSearch: function () {
            }, initFN: () => {

            }, initGM: function () {
                new window.GridManager(table, arg, (e => {
                    console.log("渲染完成后的回调函数:", e), console.log(arg.columnData)
                }))
            }, editRowData: function (e) {
                window.GridManager.updateRowData("test", "id", {
                    id: window.parseInt(e.getAttribute("data-id")),
                    lastDate: (new Date).getTime()
                })
            }
        }, table = document.querySelector("#main_table");
        demo1.initSearch(table), demo1.initGM(table), demo1.initFN();

        function admin_add(title,url,w,h){
            layer_show(title,url,w,h);
        }

        function layer_show(title,url,w,h){
            if (title == null || title === '') {
                title=false;
            };
            if (url == null || url === '') {
                url="404.html";
            };
            if (w == null || w === '') {
                w=800;
            };
            if (h == null || h === '') {
                h=($(window).height() - 50);
            };
            layer.open({
                type: 2,
                area: [w+'px', h +'px'],
                fix: false, //不固定
                maxmin: true,
                shade:0.4,
                title: title,
                content: url
            });
        }

        function layer_close(){
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        }

        function delete_flow(operate_type, flow_id) {
            if (operate_type === 'delete') {
                var confirm_message = "是否确认删除该流程！"
            }else {
                confirm_message = "是否确认废弃该流程！"
            }
            var confirm_flag = confirm(confirm_message);
            if (confirm_flag) {
                var form = new FormData();
                form.append("operate_type", operate_type)
                form.append("flow_id", flow_id)
                document.getElementById("loading").style.display = "inline-block";
                var xhr = new XMLHttpRequest();
                var local_host = window.location.host;          // 获取当前IP
                xhr.open('post', "/back-management/DeleteFlow", true);
                xhr.send(form);
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4) {
                        if (xhr.status === 200) {
                            var JsonDate = JSON.parse(xhr.responseText);
                            if (JsonDate["code"] === 200) {
                                alert(JsonDate['message']);
                                window.location.reload();
                            } else {
                                alert(JsonDate['message']);
                                document.getElementById("loading").style.display = "none";
                            }
                        }
                    }
                };
            }
        }
    </script>
</body>
</html>